<template>
  <div v-if="statedata">
    <div class="bg">
      <return-before />
      <div class="top">
        <div class="lf">
          <img
            src="https://img1.baidu.com/it/u=4049022245,514596079&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1688403600&t=0e6243b846d9ef2879cdf37c1fde0413"
          />
        </div>
        <div class="rg">
          <h4>{{ statedata.bookname}}</h4>
          <p>作者{{ statedata.bookauthor}}</p>
          <p class="bq">都市生活</p>
          <p class="bq">校园</p>
        </div>
      </div>
    </div>
    <!-- 下面是tab切换 -->

    
    <div class="scroll-container" ref="scrollContainer">
      <van-tabs v-model="activeName" class="tab">
        <van-tab title="节目" name="a"  >
          <div>
            <div>
              
              <div v-for="item in statedata.program" >
               
                <div class="box">
                  <div class="leftt">
                    <van-icon name="music-o" class="tu" size="30" />
                  </div>
                  <div class="rightt" >
                    <div class="text">{{ item.partname}}</div>
                    <div class="text">
                      <span style="margin-right: 4px">时长：</span>
                      <span>{{ item.parttime}}</span>
                    </div>
                  </div>
                </div>
              </div>
             
            </div>
          </div>
        </van-tab>

        <van-tab title="简介" name="b">
          <h3
            style="margin-top: 10px  margin-top: 5px;
  margin-left: 5px;"
          >
            内容简介
          </h3>
          <p>
            &nbsp;&nbsp;台著名学者南怀瑾先生有关《金刚经》的讲记。作者依
            据梁代昭明太子的分法，将《金刚经》分为三十二品(相
            当于章)，然后逐品作了讲解。每-品均以一首偈颂作总
            结，以阐发自己的心得。
          </p>
          <p>
            &nbsp;&nbsp;台著名学者南怀瑾先生有关《金刚经》的讲记。作者依
            据梁代昭明太子的分法，将《金刚经》分为三十二品(相
            当于章)，然后逐品作了讲解。每-品均以一首偈颂作总
            结，以阐发自己的心得。
          </p>
        </van-tab>

        <!-- 下面是评论区 -->
        <van-tab title="评论" name="c">
          <p style="margin-left: 10px" class="comment">
            精彩评论 <span style="margin-left: 210px">(99+评论)</span>
          </p>
          <div class="box"  v-for="index in 10" :key="index">
            <div class="leftt">
              <img
                class="yonghutouxiang"
                src="https://img0.baidu.com/it/u=535862246,1009430706&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1688403600&t=e6bbd99d5d9976ca9cf745bf00b2e1a5"
              />
            </div>
            <div class="rightt">
              <div class="textt">
                用户名
              </div>
              <div class="text">
                <div class="ownuser">
                  &nbsp;&nbsp;人物饱满充实立体，通过形象生动的描绘，彰显了人物的特色
                </div>
               
          </div>
          </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
//获取当前元素的offsetTop

  
export default {
  props: ["statedata"],
  data() {
    return {
      activeName: "a",
      
    };
  },
 
  // 下面是监听事件

  
  
};
</script>

<style lang="scss" scoped>

// .tab {
//   position: sticky;
//   top: 0;
//   background-color: #f0f0f0;
//   /* 添加其他样式属性，如宽度、高度、边距等 */
// }
// 设置tab切换栏置顶
// .scroll-container {
//   height: calc(100vh - 146px);
//   overflow-y: scroll;
//   /* 滚动容器样式 */
// }

// .tab {
//   height: 50px; /* 设置tab切换栏的高度 */
//   /* tab切换栏样式 */
// }
// 暂时没
// .tab-content {
//   padding-top: 50px; /* 让内容项从tab切换栏下方开始显示 */
//   /* 内容项样式 */
// }
// 顶部的内容
.top {
  width: 100%;
  height: 120px;
  background-color: #707070;
  margin-top: 25px;
  //   position: relative;
}
:deep(.van-icon-arrow-left) {
  color: rgb(217, 216, 213);
  font-size: 20px;
}
// 修改已经封装好的组件返回箭头使用deep
:deep(.van-nav-bar) {
  background-color: #707070;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
// 这个伪标签选择器是通过在网页排查时发现默认设置了间距
:deep(.van-hairline--bottom::after) {
  border: 0px;
}
.bg {
  background-color: #707070;
}
.lf {
  float: left;
  width: 135px;
  height: 150px;
  margin-top: 10px;
  margin-left: 20px;
  img {
    width: 120px;
    height: 150px;
  }
}
.rg {
  float: left;
  width: 200px;
  height: 125px;
  margin-top: 40px;
}
p {
  margin-top: 2px;
}
.bq {
  width: 70px;
  height: 23px;
  border-radius: 20px;
  border: 1px solid goldenrod;
  margin-right: 5px;
  background-color: white;
  font-size: 14px;
  color: #5c5b5b;
  text-align: center;
  float: left;
}

// tab切换
:deep(.van-tabs__line) {
  background-color: green;
}
:deep(.tab) {
  clear: both;
  // title-active-color:green;
}
// 节目的样式设置
.box {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  margin-top: 7px;
  margin-left: 8px;
}
.box:last-child {
  margin-bottom: 0px;
}
.leftt {
  margin-right: 10px;
}

.rightt {
  flex-grow: 1;
}
.text {
  margin-bottom: 5px;
}

.text span {
  margin-right: 5px;
}

// 下面是评论
.yonghutouxiang {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.textt{
  font-size: 14px;
  font-family:'Times New Roman', Times, serif;
  font-weight: bold;
}
.ownuser{
  margin-left: 2px;
  font-size: 16px;
  background-color: rgb(244, 210, 158);
  border-radius: 10px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  opacity: 0.9;
}
.comment{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgb(38, 38, 39);
}
</style>
